﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery拖放</title>
<!--<script type="text/javascript" src="jquery-1.11.0.min.js"></script> -->
    <script src="../../js/jquery-1.4.2.min.js"></script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { background-color: #eee; }
.box {width: 200px; height: 100px; cursor: move; position: absolute; top: 30px; left: 30px; background-color: #FFF; border: 1px solid #CCCCCC;  -webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;}
.main_tabletop{width: 100%;height:24px;background:#ffee00;}
</style>
</head>
<body>
<div class="box">
    <div class="main_tabletop">我是可以拖动的标题</div>
    左、右、下、左下、右下都可放大缩小
</div>
<div class="box">
    <div class="main_tabletop">我是可以拖动的标题2</div>
    左、右、下、左下、右下都可放大缩小
</div>

</body>
</html> 
<script type="text/javascript">
    $(function () {
        $(document).mousemove(function (e) {
            if (!!this.move) {
                var posix = !document.move_target ? { 'x': 0, 'y': 0 } : document.move_target.posix,
                    callback = document.call_down || function () {
                        $(this.move_target).css({
                            'top': e.pageY - posix.y,
                            'left': e.pageX - posix.x
                        });
                    };

                callback.call(this, e, posix);
            }
        }).mouseup(function (e) {
            if (!!this.move) {
                var callback = document.call_up || function () { };
                callback.call(this, e);
                $.extend(this, {
                    'move': false,
                    'move_target': null,
                    'call_down': false,
                    'call_up': false
                });
            }
        });

        var $box = $('.box .main_tabletop').mousedown(function (e) {
            var $p = $(this).parent();
            var $pp = $p[0];
            var offset = $p.offset();
            $pp.posix = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };
            $.extend(document, { 'move': true, 'move_target': $pp });

        });
        $('.box').bind(
            {
                'mousemove': function (e) {
                    $(this).css({ cursor: "default" });
                    var offset = $(this).offset(), resize = true;
                    var x = e.clientX, y = e.clientY, t = offset.top, l = offset.left, w = $(this).width(), h = $(this).height(), ww = $('.main_tabletop').height(), b = 10;
                    if (x < (l + b) && y > (t + ww) && y < (t + h - b)) {
                        $(this).css({ cursor: "w-resize" });
                        $(this).unbind("mousedown").bind({
                            "mousedown": function (e) {
                                var $p = $(this);
                                var posix = {
                                    'w': $p.width(),
                                    'h': $p.height(),
                                    'x': e.pageX,
                                    'y': e.pageY
                                };

                                $.extend(document, {
                                    'move': true, 'call_down': function (e) {
                                        $p.css({
                                            'width': Math.max(30, posix.x - e.pageX + posix.w),
                                            'left': Math.max(30, e.pageX)
                                        });
                                    }
                                });
                            }
                        });
                    } else if (x < (l + w) && x > (l + w - b) && y > (t + ww) && y < (t + h - b)) {
                        $(this).css({ cursor: "e-resize" });
                        $(this).unbind("mousedown").bind({
                            "mousedown": function (e) {
                                var $p = $(this);
                                var posix = {
                                    'w': $p.width(),
                                    'x': e.pageX
                                };
                                resizeBox($p, posix, e);
                            }
                        });
                    } else if (y < (t + h) && y > (t + h - b) && x > (l + b) && x < (l + w - b)) {
                        $(this).css({ cursor: "s-resize" });
                        $(this).unbind("mousedown").bind({
                            "mousedown": function (e) {
                                var $p = $(this);
                                var posix = {
                                    'h': $p.height(),
                                    'y': e.pageY
                                };
                                resizeBox($p, posix, e);
                            }
                        });
                    } else if (x < (l + b) && y > (t + h - b) && y < (t + h)) {
                        $(this).css({ cursor: "sw-resize" });
                        $(this).unbind("mousedown").bind({
                            "mousedown": function (e) {
                                var $p = $(this);
                                var posix = {
                                    'w': $p.width(),
                                    'h': $p.height(),
                                    'x': e.pageX,
                                    'y': e.pageY
                                };

                                $.extend(document, {
                                    'move': true, 'call_down': function (e) {
                                        $p.css({
                                            'width': Math.max(30, posix.x - e.pageX + posix.w),
                                            'height': Math.max(30, e.pageY - posix.y + posix.h),
                                            'left': Math.max(30, e.pageX)
                                        });
                                    }
                                });
                            }
                        });
                    } else if (y < (t + h) && y > (t + h - b) && x < (l + w) && x > (l + w - b)) {
                        $(this).css({ cursor: "se-resize" });
                        $(this).unbind("mousedown").bind({
                            "mousedown": function (e) {
                                var $p = $(this);
                                var posix = {
                                    'w': $p.width(),
                                    'h': $p.height(),
                                    'x': e.pageX,
                                    'y': e.pageY
                                };
                                $.extend(document, {
                                    'move': true, 'call_down': function (e) {
                                        $p.css({
                                            'width': Math.max(30, e.pageX - posix.x + posix.w),
                                            'height': Math.max(30, e.pageY - posix.y + posix.h)
                                        });
                                    }
                                });
                            }
                        });
                    } else if (y < (t + ww) && x > l && x < (l + w)) {
                        $(this).css({ cursor: "move" });
                        $(this).unbind("mousedown");
                    }
                },
                "mouseup": function () {
                    $(this).unbind("mousedown");
                }
            });
        function resizeBox($p, posix, e) {
            $.extend(document, {
                'move': true, 'call_down': function (e) {
                    $p.css({
                        'width': Math.max(30, e.pageX - posix.x + posix.w),
                        'height': Math.max(30, e.pageY - posix.y + posix.h)
                    });
                }
            });
        }
    });

</script>